<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

<title></title>
<style>
		.ball{
		position: absolute;
		background: red;
		width: 40px;
		height: 40px;
		border-radius: 20px;
		top: 200px;
		left: 100px;
		}
</style>

</head>
<body>
<div id="box" class="ball"></div>

<script>
	//调用入口函数
$(function(){
	//按键事件 键盘事件
	 $(document).keydown(e=>{
		 var item=$('.ball');
		 var left1=item.offset().left;
		 var top1=item.offset().top;
		 console.log(e.which);	
		 switch(e.which){
			 case 37:
			 case 65:
			 //left
					item.offset({left:left1-5});
					break;
				
			 case 38:
			 case 87:
			 //up
					item.offset({top:top1-5});
					break;
				
			 case 39:
			 case 68:
			  //right
					item.offset({left:left1+5});
					break;
				
			 case 40:
			 case 83:
			 //down
					item.offset({top:top1+5});
					break;
		 }
		 
		 
	
		
	
// console.log(left+""+top)	
	
// $(document).keydown(function(){
// $(document).keydown(function(e){
// $(document).keydown(e=>{
// console.log(e.which)
		
	})
	
})

</script>

</body>
</html>
